<!--
 * @Description: 魔方多维布局配置

 * @Date: 2021-06-03 13:59:00

 * @LastEditTime: 2021-10-25 15:42:22
-->
<template>
  <div>
    <!-- 魔方行数选择 -->
    <config-item v-show="mValue.model == 'custom'" label="魔方行数">
      <el-select v-model="mValue.row" placeholder="请选择" size="small" @change="changeRow">
        <el-option v-for="key in 10" :key="key" :label="key + '行'" :value="key">
        </el-option>
      </el-select>
    </config-item>

    <!-- 魔方布局 -->
    <template>
      <div class="f-red f13 mb15 pl10 pr10">魔方布局</div>
      <div class="f-grey f12 mb15 pl10 pr10">移动鼠标选定布局区域大小</div>
      <div class="pl10 pl10">
        <cap-cube-layout ref="layout" :row="mValue.row" :model="mValue.model" v-model="mValue.list"
          @onCuurIndex="onCuurIndex"></cap-cube-layout>
      </div>
    </template>

    <!-- 魔方模板选择 -->
    <SchemaSelect class="mt15 mb20" label="模板选择" v-model="mValue.model" :data="modelOptions"
      @change="changeModel">
    </SchemaSelect>

    <div v-if="activeItem&&activeItem.jump" class="nav ml10 mr10  mb20">
      <Imgpond :count="1" v-model="activeItem.image" />

      <config-item label="页面跳转">
        <div class="flex col-center h32">
          <div v-if="!activeItem.jump.type" class="f12 f-theme pointer" @click="open">
            选择跳转到的页面
          </div>
          <template v-else>
            <el-tag size="small" class='tagWidth'>{{ pageName }}</el-tag>
            <span class="ml5 f12 f-theme pointer" @click="open">修改</span>
          </template>
        </div>
      </config-item>
    </div>
    <JumpDialog ref="jump" :tabs="tabs" @close="close" :itemPage="activeItem.jump" :mallDataList="mallDataList" v-if="activeItem&&activeItem.jump"></JumpDialog>
  </div>
</template>

<script>
import schemaMixin from "@/mixin/schemaMixin";
import CapCubeLayout from "./CapCubeLayout";
import { initialModels, modelOptions } from "./config";
import SchemaJump from "../SchemaJump/index";
import VolBox from "@/components/basic/VolBox.vue";
export default {
  name: "SchemaCapCube",
  mixins: [schemaMixin],
  components: {
    CapCubeLayout,
    SchemaJump,
    VolBox,
  },
  props: {
    value: {
      default: () => ({})
    },
  },
  provide() {
    return {
      value: this.value
    };
  },
  data() {
    return {
      mallDataList:JSON.parse(localStorage.getItem('mallDataList'))||[],
      pageName:'',
      modelOptions,
      activeItem: {},
      mValue: null,
      fixedPages: [
        {
          id: "/pages/index/index",
          name: "首页",
          type: "fixed",
        },
        {
          id: "/pages/index/cart",
          name: "购物车",
          type: "fixed",
        },
        {
          id: "/pages/index/user",
          name: "我的",
          type: "fixed",
        },
        {
          id: "/pages/index/category",
          name: "商品分类",
          type: "fixed",
        },
      ],
      activeItemJumpId: false,
      tabs: [
        {
          label: "微页面",
          type: "fixed",
        },
        {
          label: "自定义页面",
          type: "custom",
        },
        {
          label: "类型链接",
          type: "link",
        },
        {
          label: "酒店链接",
          type: "wineshoplink",
        },
        // {
        //   label:"指定产品",
        //   type:"specifiedProduct",
        // },
        {
          label: "指定商品",
          type: "designatedGoods",
        },
        {
          label: "微信跳转",
          type: "wechatImg",
        },
        {
          label: "不跳转",
          type: undefined,
        },
        {
          label: "指定教练",
          type: "coach",
        },
        {
          label: "拨打电话",
          type: "phone",
        },
        {
          label: "地址",
          type: "address",
        },
        {
          label: "二级页跳转",
          type: "twoPageJump",
        },
      ],
    };
  },
  methods: {
    close(name){
      this.pageName = name
    },
    // 切换模型
    changeModel(model) {
      if (model) {
        // 设置模板对应行数
        let target = this.modelOptions.find((m) => m.value == model);
        this.$set(this.mValue, "row", target.row);
        // 重置模板
        this.$refs.layout.reset();
        // 设置模板对应初始数据
        if (model == "custom") {
          this.$set(this.mValue, "list", []);
        } else {
          this.$set(
            this.mValue,
            "list",
            this._.cloneDeep(initialModels[model])
          );
          this.mValue.list.forEach((i) => {
            i.jump = {
              id: "",
              type: "",
            };
          });
        }
      }
    },
    // 切换行数
    changeRow() {
      this.$refs.layout.reset();
    },
    onCuurIndex(itme) {
      this.activeItem = itme;
      if (this.activeItem.jump.type != "") {
        this.activeItemJumpId = true;
      } else {
        this.activeItemJumpId = false;
      }
    },
    open() {
      this.$refs.jump.open(this.activeItem.jump);
    },
  },
};
</script>
<style lang="scss" scoped>
.tabs {
  display: flex;

  .tab {
    width: 100px;
    height: 30px;
    color: #979797;
    border: solid 1px #ebedf0;
    cursor: pointer;
  }

  .tab-active {
    color: #155bd4;
    border: solid 1px #155bd4;
    background: #e0edff;
  }
}
.el-select .el-select-dropdown {
  transform: translateX(-5px);
}
.mart10 {
  margin-top: 10px;
}
.tagWidth{
  max-width: 170px!important;
  min-width: 170px!important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
